<template>
  <div class="scoreContainer" :style="{height:scoreContainerHeight}">
    <div class="headerBox">
      <h5>在职员工月度评分系统</h5>
    </div>

    <div class="tableContainer" :style="{height:tableContainerHeight}">
      <el-table
          :data="tableData"
          :height="tableHeight"
          border
          highlight-current-row
          size="small"
          style="width: 100%">
        <el-table-column
            prop="sgrade"
            label="本月得分"
            min-width="80">
        </el-table-column>
        <el-table-column
            prop="eid"
            label="员工ID"
            min-width="80">
        </el-table-column>
        <el-table-column
            prop="ename"
            label="姓名"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="esex"
            label="性别"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="eeducation"
            label="学历"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="dname"
            label="部门"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="ejobTitle"
            label="职称"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="eposition"
            label="职位"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="ejoinDate"
            label="入职日期"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="sInfo"
            label="详细资料"
            min-width="100">
          <template slot-scope="scope">
            <span class="info-cw" @click="toDetaileInfo(scope.row)">详细资料</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="handle"
            label="操作"
            min-width="100">
          <template slot-scope="scope">
            <span class="score-cw" @click="showScoreDialog(scope.row)">评分</span>
          </template>
        </el-table-column>
      </el-table>
      <!--  分页  -->
      <template>
        <div class="pageContainer">
          <i class="el-icon-search page-icon search-icon" @click="showSearchDialog"></i>
          <i class="el-icon-refresh page-icon refresh-icon"></i>
          <el-pagination
              class="page-container"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @prev-click="prePage"
              @next-click="nextPage"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="Number(total1)">
          </el-pagination>
        </div>
      </template>
    </div>

    <Score></Score>
    <SearchDialog></SearchDialog>
  </div>
</template>

<script>
import {mapState, mapMutations, mapActions} from 'vuex'
import Score from '@/pages/Performance/Score'
import SearchDialog from '@/pages/Performance/SearchDialog'

export default {
  name: "StaffScore",
  data() {
    return {
      currentPage: 1,
      page: 1,
      limit: 10,
    }
  },
  components: {
    Score,
    SearchDialog
  },
  computed: {
    ...mapState('score', ['updateStatus', 'tableData', 'total1']),
    tableHeight() {
      if (this.tableData.length > 12) {
        return 12 * 43 + 25
      } else if (this.tableData.length < 10) {
        return 10 * 43 + 25
      }
      return this.tableData.length * 43 + 25
    },
    tableContainerHeight() {
      if (this.tableData.length > 12) {
        return 12 * 43 + 70 + 'px'
      } else if (this.tableData.length < 10) {
        return 10 * 43 + 70 + 'px'
      }
      return this.tableData.length * 43 + 70 + 'px'
    },
    scoreContainerHeight() {
      if (this.tableData.length > 12) {
        return 12 * 43 + 160 + 'px'
      } else if (this.tableData.length < 10) {
        return 10 * 43 + 160 + 'px'
      }
      return this.tableData.length * 43 + 190 + 'px'
    }
  },
  methods: {
    ...mapActions('score', ['getScoreRecords', 'getRequestData']),
    ...mapMutations('score', ['showScoreDialog', 'showSearchDialog']),
    //每页显示多少条
    handleSizeChange(val) {
      let limit = this.limit = val
      let page = this.page
      this.getRequestData({page, limit})
    },
    //当前页是第几页
    handleCurrentChange(val) {
      let page = this.page = val
      let limit = this.limit
      this.getRequestData({page, limit})
    },
    //点击上一页、下一页
    prePage() {
      let page = this.page
      let limit = this.limit
      page--
      this.getRequestData({page, limit})
    },
    nextPage() {
      let page = this.page
      let limit = this.limit
      page++
      this.getRequestData({page, limit})
    },
    toDetaileInfo(row) {
      this.$router.push({
        name: 'StaffInfoList',
        query: {staffname: row.ename, eid: row.eid}
      })
    },
  },
  watch: {
    updateStatus(newStatus) {
      let page = this.page
      let limit = this.limit
      this.getRequestData({page, limit})
    }
  },
  mounted() {
    let page = this.page
    let limit = this.limit
    this.getRequestData({page, limit})
    setTimeout(() => {
      this.getScoreRecords({page, limit})
    }, 200)
  }
}
</script>

<style scoped>
.scoreContainer {
  width: 98%;
  margin: 15px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.headerBox {
  width: 100%;
  height: 40px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #cfd1d2;
  background-color: #fff;
}

.tableContainer {
  width: 96%;
  margin: 15px auto;
  border: 1px solid #cfd1d2;
}

.score-cw {
  color: red;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.info-cw {
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.info-cw:hover {
  color: #333333;
}

.page-container {
  text-align: center;
}

.pageContainer {
  position: relative;
}

.page-icon {
  position: absolute;
  top: 8px;
  font-size: 20px;
  color: #606266;
}

.search-icon {
  left: 0;
}

.refresh-icon {
  right: 0;
}
</style>